<template>
  <div>
    <van-nav-bar title="我的" fixed @click-right="onClickRight">
      <van-icon name="setting-o" size="20" slot="right"/>
    </van-nav-bar>
    <div class="content">
      <div class="profile">
        <!-- <van-icon:src="'/uploads' +userInfo.photo" size="50" color="#aaa"/> -->
        <van-image class=".van-icon" :src="'/uploads' +userInfo.photo" @click="changeProfile" ></van-image>
        <p>{{userInfo.user_name}}</p>
        <div class="follow">
            <span>{{follower}} follower |</span>
            <span> {{following}} following</span>
        </div>
      </div>
      <van-cell-group>
        <van-cell title="我关注的俱乐部" size="large" is-link to="/myclub" />
        <van-cell title="我关注的大师" size="large" is-link to="/mymaster" />
        <van-cell title="我发表的晒图" size="large" is-link to="/myshare" />
      </van-cell-group>
      <van-popup v-model="show" position="bottom">
        <van-uploader class="upload-pic" :after-read="afterRead">
          <van-button  icon="photo" type="primary">上传图片</van-button>
        </van-uploader>
      </van-popup>
      <van-popup class="change-pass" v-model="showPass" position="right" :overlay="false">
        <div class="change-pass-content">
          <van-icon name="arrow-left" size="20" @click="showPass=!showPass"></van-icon>
          <div class="input-pass">
            <van-cell-group>
              <van-field v-model="oPassword" required :clearable="true"
                label="新密码" type="password" placeholder="请输入密码"/>
              <van-field v-model="nPassword" type="password" :clearable="true"
                label="确认密码" placeholder="请再次输入密码" required />
            </van-cell-group>
            <van-button class="btn-pass-confirm" type="primary" @click="changePass">确定</van-button>
          </div>
        </div>
      </van-popup>
      <van-button class="logout" type="danger" @click="logout">注销</van-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'me',
  methods: {
    onClickRight () {
      this.showPass = !this.showPass
    },
    changeProfile () {
      this.show = !this.show
    },
    changePass () {
      // this.$toast('change')
      if (this.nPassword === this.oPassword) {
        this.$axios.get('/api/updatepass/', {
          params: {
            SessionID: sessionStorage.sessionid,
            userid: sessionStorage.userid,
            password: this.nPassword
          }
        }).then((result) => {
          // console.log('result :', result)
          this.$toast.loading({
            mask: true,
            message: '加载中...'
          })
          setTimeout(() => {
            this.$toast.clear()
            // this.$toast('修改成功')
            this.nPassword = ''
            this.oPassword = ''
            this.$dialog.alert({
              title: '修改成功',
              message: '请用您刚修改的密码重新登录'
            }).then(() => {
              // on close
              this.$root.$router.replace('/')
              sessionStorage.clear()
            })
          }, 1000)
        })
      } else {
        this.$notify('俩次密码不一致')
      }
    },
    afterRead (file) {
      let formData = new FormData()
      formData.append('SessionID', sessionStorage.sessionid)
      formData.append('photo', file.file)
      formData.append('userid', sessionStorage.userid)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.$axios.post('/api/fuserphoto/', formData, config).then(response => {
        // console.log(response)
        this.show = !this.show
        this.getInfo()
      })
    },
    getInfo () {
      this.$axios.get('/api/getmine/', {
        params: {
          SessionID: sessionStorage.sessionid,
          userid: sessionStorage.userid
        }
      }).then((result) => {
        this.userInfo = result.data
        // console.log('this.userInfo :', this.userInfo);
      })
    },
    logout () {
      this.$dialog.alert({
        title: '注销成功'
      }).then(() => {
        // on close
        this.$root.$router.replace('/')
        sessionStorage.clear()
      })
    }
  },
  data () {
    return {
      follower: 0,
      following: 0,
      show: false,
      showPass: false,
      oPassword: '',
      nPassword: '',
      true: true,
      userInfo: {}
    }
  },
  mounted () {
    this.getInfo()
  }
}
</script>
<style scoped>
.van-nav-bar {
  border-bottom: 1px solid #ddd;
}
.content {
  margin-top: 60px;
  padding: 1rem;
}
.profile {
  text-align: center;
  border-bottom: 1px solid #aaa;
  padding-bottom: 0.5rem;
}
.profile > .van-image {
  border: 1px solid #aaa;
  border-radius: 50%;
  overflow: hidden;
  height: 5rem;
  width: 5rem;
  text-align: center;
  line-height: 4.5rem;
}
.van-cell{
    margin-top: 0.5rem;
    /* height: 3.5rem;
    line-height: 2rem; */
}
.follow{
    width: 100%;
}
.follow span{
    width: 50%;
    font-size: 0.8rem;
    color: #999;
}
.upload-pic{
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  background-color: rgb(7, 193, 96);
}
.van-button{
  margin: auto
}
.change-pass{
  height: 100%;
  width: 100%;
  /* padding: 1rem; */
}
.change-pass-content{
  padding: 1rem;
  /* border: 1px solid black; */
}
.input-pass{
  padding-top: 1.5rem;
}
.btn-pass-confirm{
  margin-top: 2rem;
  width: 7rem;
  float:right;
}
.logout{
  margin-top: 2rem;
  width: 100%;
}
</style>
